<style scoped>
</style>
<!--  -->
<template>
  <div class="container-col-opt" v-if="dialogShow">
    <SettingDialog :title="'更多操作 '+ name " :dialogVisible="dialogShow" :close="close" ref="settingDialog">
      <el-row style="width:380px;">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <div style="height:24px;"></div>
            <el-button size="mini" :disabled="!up" @click.stop="upCallback"><i
                class="icon iconfont icon-jiantouarrow499"></i>
            </el-button>
            <el-button size="mini" :disabled="!down" @click.stop="downCallback"><i
                class="icon iconfont icon-jiantouarrow505"></i>
            </el-button>
            <el-button size="mini" @click.stop="fixedCallback"><i class="icon iconfont icon-guding_weiguding"></i>
            </el-button>
            <el-button size="mini" @click.stop="addContainerBox"><i class="icon iconfont icon-col_containers-copy"></i>
            </el-button>
            <el-button size="mini" @click.stop="setCallback"><i class="icon iconfont icon-chilun2"></i>
            </el-button>
            <el-button size="mini" @click.stop="delCallback"><i class="icon iconfont icon-delete"></i>
            </el-button>
            <div style="height:24px;"></div>
          </div>
        </el-col>
      </el-row>
    </SettingDialog>
  </div>
</template>

<script>
import SettingDialog from '@/components/common/dialog/SettingDialog.vue'
import * as WindowType from '@/config/windowtype.js'
import VueFunctions from '@/core/VueFunctions.js'
// import * as functions from '@/core/functions.js'
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    // 添加栅格
    VueFunctions.method(WindowType.SHOW_CONTAINER_COL_OPT, ({ tempId, name, up, down, allClose }, callback) => {
      this.close()
      this.tempId = tempId
      this.name = name
      this.up = up
      this.down = down
      this.dialogShow = true
      this.callback = callback
      if (typeof allClose === 'boolean') {
        this.allClose = allClose
      }
      this.$nextTick(() => {
        if (this.$refs['settingDialog']) {
          this.$refs['settingDialog'].open()
        }
      })
    })
  },
  data () {
    return {
      dialogShow: false,
      loading: false,
      name: '容器组件',
      formLabelWidth: '120px',
      tempId: -1,
      up: true,
      down: true,
      allClose: false,
      callback: {
        // 左移动回调
        upCallback: () => { },
        // 右移动回到
        downCallback: () => { },
        // 固定回调
        fixedCallback: () => { },
        // 添加组件回调
        addContainerBox: () => { },
        // 设置回调
        setCallback: () => { },
        // 删除糊掉
        delCallback: () => { }
      }
    }
  },
  watch: {
  },
  methods: {
    close () {
      this.dialogShow = false
      this.name = '栅格'
      this.left = true
      this.down = true
      this.tempId = -1
      this.allClose = false
      this.callback = {
        // 左移动回调
        upCallback: (tempId) => { },
        // 右移动回到
        downCallback: (tempId) => { },
        // 固定回调
        fixedCallback: (tempId) => { },
        // 添加组件回调
        addContainerBox: (tempId) => { },
        // 设置回调
        setCallback: (tempId) => { },
        // 删除糊掉
        delCallback: (tempId) => { }
      }
    },
    upCallback () {
      if (this.callback && this.callback.upCallback) {
        this.callback.upCallback(this.tempId)
        if (this.allClose === true) {
          this.close()
        }
      }
    },
    downCallback () {
      if (this.callback && this.callback.downCallback) {
        this.callback.downCallback(this.tempId)
        if (this.allClose === true) {
          this.close()
        }
      }
    },
    fixedCallback () {
      if (this.callback && this.callback.fixedCallback) {
        this.callback.fixedCallback(this.tempId)
        if (this.allClose === true) {
          this.close()
        }
      }
    },
    addContainerBox () {
      if (this.callback && this.callback.addContainerBox) {
        this.callback.addContainerBox(this.tempId)
        this.close()
      }
    },
    setCallback () {
      if (this.callback && this.callback.setCallback) {
        this.callback.setCallback(this.tempId)
        this.close()
      }
    },
    delCallback () {
      if (this.callback && this.callback.delCallback) {
        this.callback.delCallback(this.tempId)
        this.close()
      }
    }
  },
  components: {
    SettingDialog
  }
}

</script>
